<template>
  <view class="succeed">
    <!-- <button @click="c">ch</button> -->
	<div class="flex-col page">
	      <div class="flex-col section">
	        <div class="flex-row justify-between items-center group">
	          <image
	            class="image"
	            src="../../static/16829343556460535149.png"
	          />
	          <div class="t1">莫言</div>
	          <image
	            class="image_2"
	            src="../../static/5.png"
	          />
	         
	        </div>
	        <div class="flex-col justify-start group_2">
	          <div class="t2">恭喜你完成本次学习</div>
	          <div class=" section_2"></div>
	          <div class="section_6 pos_6"></div>
	          <div class="section_7 pos_7"></div>
	          <div class="divider pos_2"></div>
	          <div class="section_5 pos_3 t5">20</div>
	          <div class="section_5 pos_4 t5">20</div>
	          <div class="section_5 pos_5 t5">0</div>
	          <div class="section_3 pos "></div>
	          <div class="t3">{{day}}</div>
	          <div class="t4">打卡天数</div>
	          
	          <div class="t6">今日已学</div>
	          <div class="t7">已掌握</div>
	          <div class="t8">所剩单词</div>
	        </div>
	      </div>
	      <div class="flex-col section_4 space-y-12">
	        <div class="shrink-0 button t22" @click="reWord">再背20词</div>
	        <div class="shrink-0 button t22" @click="c">休息一会</div>
	      </div>
	    </div>
  </view>
</template>

<script>
  import api from '../../utils/jiekou.js'
  import time from '../../utils/Storage.js'
  const {set} = time;
  const {setTime} = time;
  const{getOldWordDay} = api
  export default {
    data() {
      return {
        day:1
      }
    },
    onShow() {
      set();
      this.getOldWordDay_d();
    },
    methods: {
     c(){
       uni.switchTab({
         url:"/pages/indexz/indexz"
       })
     },
     reWord(){
       uni.showModal({
         content:"十分钟后再来吧",
         showCancel:false,
       })
     },
     getOldWordDay_d(){
       getOldWordDay().then((res)=>{
         let {data} =res;
         this.day=data;
       })
     }
    }
  }
</script>

<style>
.succeed{
  width: 100%;
  height: 100%;
  background-color: #aa00ff;
}

 .t1{
      left: 31%;
    position: absolute;
    font-weight: bolder;
    font-size: 20px;
    }
    .t2{

      left: 30%;
    position: absolute;
    font-weight: bolder;
    font-size: 16px;
    top: 60%;
    z-index: 2;
    }
    .t3{
      left: 47.5%;
    position: absolute;
    font-size: 26px;
    top: 77%;
    z-index: 2;
    }
    .t4{
      left: 42%;
    position: absolute;
    font-size: 14px;
    top: 93%;
    z-index: 2;
    }
    .t5{
      line-height: 270%;
    text-align: center;
    font-weight: bolder;
    font-size: 21px;
    }
    .t6{

      left: 14%;
    position: absolute;
    font-size: 14px;
    top: 127%;
    z-index: 2;
    }
    .t7{

      left: 44%;
    position: absolute;
    font-size: 14px;
    top: 127%;
    z-index: 2;
    }
    .t8{
      left: 69%;
    position: absolute;
    font-size: 14px;
    top: 127%;
    z-index: 2;
}

.t22{
  line-height: 260%;
    text-align: center;
    font-weight: bolder;
    font-size: 21px;
}
.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding: 5.365vh 1.824vh 0;
  background-color: #6ba9e8;
  filter: drop-shadow(0px 2.146vh 0.322vh #6ba9e8);
  backdrop-filter: blur(0.215vh);
  height: 37.124vh;
  position: absolute;
  top: -60%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 41%;
  z-index:1;
}
.group {
  padding-left: 3.326vh;
  padding-right: 1.609vh;
  position: absolute;
  top: -34%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 85%;
  height: 20%;
}
.image {
  border-radius: 50%;
  width: 6.652vh;
  height: 6.652vh;
}
.image_2 {
  width: 3.219vh;
  height: 3.219vh;
}
.group_2 {
  margin: 13.305vh 0 -30.687vh;
  position: absolute;
  top: 25%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 89%;
  height: 96%;
}
.section_2 {
  background-color: #ffffff;
  border-radius: 3.755vh;
  box-shadow: 0.322vh 0.322vh 0.536vh #00000040;
  filter: blur(0.215vh);
  height: 42.489vh;
  border: solid 0.322vh #5282b3;
  position: absolute;
  top: 108%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 94%;
  height: 105%;
}
.section_6 {
  background-color: #5282b3;
  border-radius: 50%;
  height: 1.717vh;
}
.pos_6 {
  position: absolute;
  top: 190%;
  left: -18%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 8%;
  height: 8%;
}
.section_7 {
  background-color: #cccccc;
  border-radius: 50%;
  height: 1.717vh;
}
.pos_7 {

  position: absolute;
  top: 190%;
  left: 18%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 8%;
  height: 8%;
  
}
.divider {
  background-color: #000000;
  width: 35.73vh;
  height: 0.107vh;
}
.pos_2 {

  transform: translate(-50%, -50%);
  position: absolute;
  top: 107%;
  left: 49%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 72%;
  height: 1px;
}
.section_5 {
  background-color: #ffffff;
  height: 6.545vh;
  border: solid 0.107vh #2a82e4;
}
.pos_3 {
  position: absolute;
  top: 130%;
  left: -54%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 17%;
  height: 17%;
 
}
.pos_4 {
  position: absolute;
  top: 130%;
  left: 0%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 17%;
  height: 17%;
}
.pos_5 {
  position: absolute;
  top: 130%;
  left: 54%;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 17%;
  height: 17%;
}
.section_3 {
  background-color: #ffffff;
  border-radius: 50%;
  height: 8.476vh;
  border: solid 0.107vh #5282b3;
}
.pos {
  position: absolute;
  top: 65%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 20%;
  height: 20%;
}
.section_4 {
  padding: 33.369vh 4.828vh 11.695vh;
  background-color: #a2c8ed;
  overflow: hidden;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 60%;
}
.space-y-12 > *:not(:first-child) {
  margin-top: 1.288vh;
}
.button {
  background-color: #ffffff4d;
  border-radius: 3.219vh;
  box-shadow: 0px 0.215vh 0.429vh #00000040;
  height: 8.262vh;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height: 100vh;
}

body * {
  box-sizing: border-box;
  flex-shrink: 0;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}
</style>
